﻿@{
	Layout = null;
}

@* 参考网址： https://layuion.com/  *@
<link href="~/libs/layui-v2.9.21/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>吊灯管理系统</title>
	<link href="~/libs/layui-v2.9.21/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />
	<style>
		dd {
			cursor: pointer;
		}

		.site-active {
			padding-left: 20px !important;
		}
	</style>
</head>

<body yyy="l李四" class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<div class="layui-header">
			<div class="layui-logo">吊灯管理系统</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			@*<ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="javascript:;">控制台</a></li>
                <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
                <li class="layui-nav-item"><a href="javascript:;">用户</a></li>
                <li class="layui-nav-item"><a href="javascript:;">自定义菜单</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">其它系统</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">邮件管理</a></dd>
                        <dd><a href="">消息管理</a></dd>
                        <dd><a href="">授权管理</a></dd>
                    </dl>
                </li>
            </ul>*@
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:;">
						<img src="https://cbu01.alicdn.com/img/ibank/2018/598/361/9593163895_420938012.jpg" class="layui-nav-img">
						阿拉丁神灯
					</a>
					@*<dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>*@
				</li>
				<li class="layui-nav-item"><a href="/Basic/login">退出</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftmenu">

					<li class="layui-nav-item  ">
						<a class="" href="javascript:;">RBAC</a>
						<dl class="layui-nav-child">

							<dd><a class="site-active" tab-name="人员管理" tab-url="/RBAC/UserList" tab-layid="1">人员管理</a></dd>
							<dd><a class="site-active" tab-name="角色管理" tab-url="/RBAC/RoleList" tab-layid="2">角色管理</a></dd>
							<dd><a class="site-active" tab-name="权限管理" tab-url="/RBAC/PermissionList" tab-layid="3">权限管理</a></dd>

						</dl>
					</li>

					<li class="layui-nav-item  ">
						<a class="" href="javascript:;">主数据</a>
						<dl class="layui-nav-child">
							@* 						<dd><a id="menua1" class="site-active" data-age="12" data-tabname="" data-address="泰山" xxx="张三" tab-name="物料产品管理" tab-url="/Puffs/Index" tab-layid="1">物料产品管理</a></dd> *@
							<dd><a class="site-active" tab-name="物料产品管理" tab-url="/Puffs/Index" tab-layid="11">物料产品管理</a></dd>
							<dd><a class="site-active" tab-name="物料产品分类" tab-url="/MaterialType/Index" tab-layid="12">物料产品分类</a></dd>
							<dd><a class="site-active" tab-name="计量单位" tab-url="/UnitMeasure/Index" tab-layid="13">计量单位</a></dd>
							<dd><a class="site-active" tab-name="客户管理" tab-url="/CustomerManagement/Index" tab-layid="14">客户管理</a></dd>
							<dd><a class="site-active" tab-name="供应商管理" tab-url="/Supplier/SupplierList" tab-layid="15">供应商管理</a></dd>
							<dd><a class="site-active" tab-name="车间设置" tab-url="/Puffs/WorksetupsList" tab-layid="16">车间设置</a></dd>
							<dd><a class="site-active" tab-name="工作站" tab-url="/Workstation/WorkstationList" tab-layid="17">工作站</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">仓库管理</a>
						<dl class="layui-nav-child">
							<dd><a class="site-active" tab-name="仓库设置" tab-url="/Warehousesetting/Index" tab-layid="18">仓库设置</a></dd>
							<dd><a href="javascript:;">库存现有量</a></dd>
							<dd><a class="site-active" tab-name="采购入库" tab-url="/ProcurementWarehousing/ProcurementWarehousingList" tab-layid="20">采购入库</a></dd>
							<dd><a class="site-active" tab-name="到货通知" tab-url="/Puffs/ArrivalView" tab-layid="21">到货通知</a></dd>
							<dd><a class="site-active" tab-name="到货通知" tab-url="/SupplierReturn/SupplierReturnList" tab-layid="22">供应商退货</a></dd>
							<dd><a class="site-active" tab-name="生产领料" tab-url="/Productionrequisition/index" tab-layid="23">生产领料</a></dd>
							<dd><a href="">生产退料</a></dd>
							<dd><a class="site-active" tab-name="产品入库" tab-url="/Warehousing/WarehousingList" tab-layid="25">产品入库</a></dd>
							<dd><a href="">销售出库</a></dd>
							<dd><a href="">销售退货</a></dd>
							<dd><a href="">转移调拨</a></dd>
							<dd><a href="">赋码管理</a></dd>
							<dd><a href="">装箱管理</a></dd>
							<dd><a href="">SN码</a></dd>
							<dd><a href="">库存盘点</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">设备管理</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:;">设备类型设置</a></dd>
							<dd><a href="javascript:;">设备台账</a></dd>
							<dd><a href="javascript:;">点检保养项目</a></dd>
							<dd><a href="javascript:;">点检保养计划</a></dd>
							<dd><a href="javascript:;">维修单</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">工装夹具管理</a>
						<dl class="layui-nav-child">
							<dd><a class="site-active" tab-name="类型设置" tab-url="/test/Default" tab-layid="5">类型设置</a></dd>
							<dd><a class="site-active" tab-name="工装夹具台账" tab-url="/test/Index" tab-layid="6">工装夹具台账</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">生产管理</a>
						<dl class="layui-nav-child">
							<dd><a class="site-active" tab-name="生产工单" tab-url="/puffs/ProductionWorkOrderList" tab-layid="5">生产工单</a></dd>
							<dd><a class="site-active" tab-name="工序设置" tab-url="/test/Index" tab-layid="6">工序设置</a></dd>
							<dd><a class="site-active" tab-name="工艺流程" tab-url="/test/Index" tab-layid="6">工艺流程</a></dd>
							<dd><a class="site-active" tab-name="生产排产" tab-url="/test/Index" tab-layid="6">生产排产</a></dd>
							<dd><a class="site-active" tab-name="生产报工" tab-url="/test/Index" tab-layid="6">生产报工</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">质量管理</a>
						<dl class="layui-nav-child">
							<dd><a class="site-active" tab-name="常见缺陷" tab-url="/test/Default" tab-layid="5">常见缺陷</a></dd>
							<dd><a class="site-active" tab-name="检测项设置" tab-url="/test/Index" tab-layid="6">检测项设置</a></dd>
							<dd><a class="site-active" tab-name="检测模板" tab-url="/test/Index" tab-layid="6">检测模板</a></dd>
							<dd><a class="site-active" tab-name="待检任务" tab-url="/test/Index" tab-layid="6">待检任务</a></dd>
							<dd><a class="site-active" tab-name="来料检验" tab-url="/test/Index" tab-layid="6">来料检验</a></dd>
							<dd><a class="site-active" tab-name="过程检验" tab-url="/test/Index" tab-layid="6">过程检验</a></dd>
							<dd><a class="site-active" tab-name="出货检验" tab-url="/test/Index" tab-layid="6">出货检验</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">排班管理</a>
						<dl class="layui-nav-child">
							<dd><a class="site-active" tab-name="排班设置" tab-url="/test/Default" tab-layid="5">排班设置</a></dd>
							<dd><a class="site-active" tab-name="排班计划" tab-url="/test/Index" tab-layid="6">排班计划</a></dd>
							<dd><a class="site-active" tab-name="节假日设置" tab-url="/test/Index" tab-layid="6">节假日设置</a></dd>
							<dd><a class="site-active" tab-name="排班日历" tab-url="/test/Index" tab-layid="6">排班日历</a></dd>
						</dl>
					</li>

					<li class="layui-nav-item">
						<a href="javascript:;">报表管理</a>
						<dl class="layui-nav-child">
							<dd><a class="site-active" tab-name="排班设置" tab-url="/test/Default" tab-layid="5">报表清单</a></dd>
							<dd><a class="site-active" tab-name="排班计划" tab-url="/test/Index" tab-layid="6">报表设计</a></dd>
						</dl>
					</li>


				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 tab简单风格 class= layui-tab-brief -->
			<div class="layui-tab " lay-allowClose="true" lay-filter="tabList">
				<ul class="layui-tab-title">
				</ul>
				<div class="layui-tab-content">
				</div>
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script src="~/libs/jquery/jquery.js"></script>
	<script src="~/libs/layui-v2.9.21/layui-v2.9.21/layui/layui.js"></script>
	<script>

		var name = $("#menua1").attr("xxx");
		console.log(name)

		$("#menua1").attr("xxx", "大刀王五");
		var name2 = $("#menua1").attr("xxx");
		console.log(name2)

		//JavaScript代码区域  按需引入
		layui.use(['element', 'jquery'], function () {
			var element = layui.element,
				$ = layui.jquery;

			//触发事件
			var active = {
				tabAdd: function (name, url, layid) {
					if (url != "" && url != null && url != undefined) {
						element.tabAdd('tabList', {
							title: name //'选项卡的标题'
							, content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="' + url + '"></iframe>'//'选项卡的内容' //支持传入html
							, id: layid//'选项卡标题的lay-id属性值'
						});
					}
				},
				tabChange: function (layid) {
					element.tabChange('tabList', layid);
				}
			}

			//当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
			$('.site-active').on("click", function () {
				var dataid = $(this);
				var name = $(this).attr("tab-name");
				var url = $(this).attr("tab-url");
				var tab_layid = dataid.attr("tab-layid");

				//1、 判断tab-layid=layid的tab页是否打开
				if ($(".layui-tab-title li").length <= 0)
				{
					//1.1 初始状态：1个Tab页也没有打开
					active.tabAdd(name, url, tab_layid); //添加tab页
					active.tabChange(tab_layid)//转到该tab页
				}
				else
				{
					//1.2   判断该Tab页是否已打开
					var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
					$.each($(".layui-tab-title li"), function () {
						//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
						if ($(this).attr("lay-id") == tab_layid) {
							isData = true;
						}
					})
					if (isData == false) {
						//标志为false 新增一个tab项
						active.tabAdd(name, url, tab_layid); //1.2.1  该Tab页未打开，则打开该tab页
					}
					active.tabChange(tab_layid)//1.2.2 转到该tab页
				}
				FrameWH();  //计算ifram层的大小
			});

			function FrameWH() { //计算ifram层的大小
				var h = $(window).height();
				$("iframe").css("height", h + "px");
			}

			$(window).resize(function () {
				FrameWH();
			})

			$(function () {
			active.tabAdd('权限管理', "/RBAC/UserList", 1); //打开tab页
				active.tabChange(1)//转到该tab页
				FrameWH();
			})
		});

	</script>
</body>
</html>